$btn-defaule-bg:#fff;
$msg-box-bg:#fbf5dc;
$msg-box-font:#cd701f;
$msg-box-border:#ebdda7;



.notice-box{
  button{
    outline:none;
    cursor:pointer;
  }
  .notice-dialog{
    background:rgba(255,255,255,.9);
    width:600px;
    border:2px solid rgba(0,0,0,.8);
    border-radius:3px;
    //overflow:hidden;
    .notice-header{
      padding:10px 0;
      font-size:16px;
      text-align:center;
      font-weight:700;
    }
    .notice-body{
      padding:15px;
      font-size:14px;
      text-align:left;
    }
    .notice-btn-group{
      button{
        margin:5px;
        background:rgba($btn-defaule-bg,1);
        border:1px solid #aaa;
        color:#666;
        padding:5px 20px;
        font-size:14px;
        letter-spacing:1px;
        display: inline-block;
        text-shadow:1px 1px 1px rgba(0,0,0,.1);
        -webkit-transition:all .5s;
        -moz-transition:all .5s;
        -o-transition:all .5s;
        transition:all .5s;
        &:hover{
          background-color:$btn-defaule-bg - 20;
        }
        &:active{
          background-color:$btn-defaule-bg - 40;
        }
      }
    }
  }
  .notice-content{
    margin:10px 20px;
  }

}

.notice-msg-box{
  top:0;
  &.notice-warn{
    background:$msg-box-bg;
    border-bottom:1px solid $msg-box-border - 20;
  }
  .notice-msg{
    font-size:14px;
    padding:10px 0;
    color: $msg-box-font;
  }
}

.notice-notification{
  display: block;
  position: fixed;
  right: 10px;
  bottom: 10px;
  background-color: #fff;
  width: 360px;
  box-shadow: 2px 2px 7px #888888;

  *{
    -moz-user-select:none;
    -webkit-user-select:none;
    user-select:none;
  }

  .notice-notification-close{
    position: absolute;
    right: 2px;
    top: 2px;
    width: 14px;
    height: 14px;
    border-radius: 7px;
    cursor: default;
    font-family: "Microsoft YaHei";
    font-size: 12px;
    line-height: 10px;

    &:hover{
      background-color: #999;
    }
  }

  .notice-notification-icon{
    float: left;
    width: 80px;
    height: 80px;

    img{
      width: 40px;
      height: 40px;
      padding: 20px;
      background-color: #ddd;
    }
  }

  .notice-notification-msg{
    display: block;
    width: 73%;
    float: right;
    font-family: "Microsoft YaHei";
    font-size: 14px;
    padding: 0px;

    span{
      display: inline-block;
      width: 100%;
      text-align: left;
    }

    .notice-notification-msg-title{
      padding: 5px 0px;
    }

    .notice-notification-msg-body{
      line-height: 15px;
      font-size: 13px;
    }

    .notice-notification-msg-from{
      color: #999;
      padding: 5px 0px;
      font-size: 12px;
    }
  }
}

